<template>
  <el-scrollbar>
    <el-menu
      :collapse="collapse"
      :router="true"
      :defaultActive="route.path"
      :unique-opened="true"
      :collapse-transition="true"
    >
      <SubMenuRender :menus="menus" />
    </el-menu>
  </el-scrollbar>
</template>

<script setup lang="ts">
import type { BreadcrumbItem } from '@/breadcrumb'
import SubMenuRender from './SubMenuRender.vue'
import { useRoute } from 'vue-router'

interface Props {
  menus: BreadcrumbItem[]
  collapse: boolean
}

defineProps<Props>()

const route = useRoute()
</script>

<style scoped lang="scss">
.el-menu {
  border-right: none;
}
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.el-scrollbar {
  height: calc(100% - $sl-layout-header-height);
}
</style>
